<template>
	<view class="order">
		<!-- tab 栏 -->
		<view class="tabBox" style="display: flex;justify-content: space-between;background-color: #fff;">
			<!-- <view class="chooseCup" style="color: #EA8100 !important;margin: 30rpx !important;">
				免责声明：基于XX会员免责申明
			</view> -->
		</view>
		<!-- 列表 -->
		<view class="listBox">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="list_t">
					<image :src="item.avatar" mode=""></image>
					<view class="list_t_r">
						<view class="list_t_r_t">
							<view class="name">昵称：{{item.nickname}}</view>
							<!-- <view class="time">2023-01-25</view> -->
						</view>
						<view class="icon">
							<image :src="baseUrl+'static/index/card2.png'" mode="" v-if="item.level_id == 1"></image>
							<image :src="baseUrl+'static/index/card1.png'" mode="" v-if="item.level_id == 2"></image>
						</view>
					</view>
				</view>
			</view>

			<!-- 提示栏 -->
			<view class="more">{{isText}}</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config/config';
	export default {
		data() {
			return {
				baseUrl: config.baseurl,
				page: 1,
				list: [],
				isText: '',
				last_page: 1
			};
		},
		onLoad() {},
		onShow() {
			this.init()
			this.getList()
		},
		methods: {
			init() {
				this.list = []
				this.page = 1
				this.isText = ''
			},
			// 获取用户列表
			getList() {
				let that = this
				uni.request({
					url: '/wanlshop/distribution/list',
					data: {
						page: that.page
					},
					success: res => {
						that.list = that.list.concat(res.data.data)
						that.last_page = res.data.last_page
						res.data.total == that.list.length ? that.isText = '暂无数据' : that.isText = ''
						console.log(that.list, 'that.list')
					}
				});
			},
		},
		onReachBottom() {
			let that = this
			if (that.page < that.last_page) {
				that.page = that.page + 1
				that.getList()
			}
		}

	}
</script>

<style lang="less">
	page {
		background-color: #fff;
	}

	.u-tab-bar {
		display: none !important;
	}

	.more {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		margin: 30rpx auto;
		padding-bottom: 50rpx;
	}

	.chooseCup {
		margin-right: 8rpx !important;

		image {
			width: 20rpx !important;
			height: 12rpx !important;
			margin: 14rpx;
		}
	}

	.order {
		width: 100vw;

		.tabBox {
			width: 100%;
			// height: 100rpx;
		}

		.listBox {
			width: 95%;
			margin: 30rpx auto;

			.list {
				width: 100%;
				height: auto;
				padding: 20rpx;
				border: 2rpx solid #d9d9d966;
				box-shadow: 0 0 16rpx rgba(0, 0, 0, .1);
				border-radius: 20rpx;
				background-color: #fff;
				margin: 20rpx auto;

				.code {
					color: #979797;
					font-weight: 400;
					font-size: 12px;
					line-height: 17px;
					margin-bottom: 10rpx;
				}

				.list_t {
					display: flex;
					padding: 10rpx 0;

					image {
						width: 86rpx;
						height: 86rpx;
						border-radius: 50%;
					}

					.list_t_r {
						width: 80%;
						margin-left: 20rpx;

						.list_t_r_t {
							font-size: 28rpx;
							font-weight: 400;
							display: flex;
							justify-content: space-between;
						}

						.time {
							color: #979797;
							font-size: 26rpx;
						}

						.icon {
							margin-top: 6rpx;

							image {
								height: 40rpx;
								width: 40rpx;
							}
						}
					}
				}

				.list_b {
					font-size: 28rpx;
					font-weight: 400;
					color: #7F8084;
					padding-top: 30rpx;

					.text {
						.money {
							display: inline-block;
							font-size: 32rpx;
							font-weight: 600;
							color: #000;
						}
					}
				}

				.btnBox {
					width: 100%;
					margin-top: 30rpx;
					flex-direction: row-reverse !important;

					.btn {
						width: 132rpx;
						height: 46rpx;
						line-height: 46rpx;
						border-radius: 46rpx;
						text-align: center;
						background-color: #000;
						color: #fff;
						font-size: 24rpx;
						font-weight: 500;
					}
				}

			}
		}
	}
</style>